import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image,Checkbox } from '@tarojs/components'
import './teaminvite.css'
import { AtCheckbox,AtButton,AtIcon,AtSearchBar} from 'taro-ui'
import { $redirectTo, $navigateBack } from '../../../../global'
import reactMixin from 'react-mixin'
import myJs from './teaminviteJs.js'
import app from '../../../../main';
export default class TeamInvite extends Component {
  
    config = {
        navigationBarTitleText: '邀请协作'
    }

    constructor () { 
        super(...arguments); 
        this.state = {
        doctor_contacts: [],
        textA:'font-size: 18px ; color:black' ,
        textB:'font-size: 15px ; color:#6d6d6d;',
        value: '',
        array:[],
        ids:[],
        boolean:[],
        //color: #72d021
        };
    } 

    offset = 0; // 偏移量
    length = 20; // 页面条数
    total = 0;


    componentWillMount () {
        this.getDoctorContacts();
    }

    getDoctorContacts() {
        let me = this;
        let arr = me.state.boolean;
        app.get('web/doctor/contact_doctors', {offset: this.offset, length: this.length, keyword: me.state.value}, function(res) {
            let date = res.data.result.list;
            for(let i=0; i<date.length; i++){
                var item = date[i];
                item.hospital = !item.hospital ? '' : item.hospital;
                arr.push(false)
            }
            me.setState({
                doctor_contacts: date,
                boolean:arr
            });
        });
    }

    //点击多选框
    changeCheckBox(index){
    let me =this;
    let arr = me.state.ids;
    let brr = me.state.boolean;
    let crr = me.state.doctor_contacts;
    if(me.state.boolean[index]==false){
        brr.splice(index,1,true);
        arr.push(crr[index].id)
        me.setState({
            ids:arr,
            boolean:brr
        },()=>{
            console.log(me.state.ids)
            console.log(me.state.boolean)
        })
    }else{
        brr.splice(index,1,false)
        arr.splice(arr.indexOf(crr[index].id),1)
        me.setState({
            ids:arr,
            boolean:brr
        },()=>{
                console.log(me.state.ids)
                console.log(me.state.boolean)
            })
        }
    }

    // 上拉加载
    onReachBottom() {
        if ((this.offset + this.length) < this.total) {
        this.offset = this.offset + this.length;
        this.getDoctorContacts();
        app.toast('正在加载中...');
        } else {
        app.toast('没有更多数据了');
        }
    }

    onChange (value) {
        this.setState({
            value: value
        }, () => {
            if (value == '' || value.length == 0) {
                this.search();
            }
        })
    }

    search() {
        this.offset = 0;
        this.setState({
            doctor_contacts: []
        });
        this.getDoctorContacts();
    }

    go=()=>{
        let me = this;
        let id = me.$router.params.id
        if(me.$router.params.pages==1){
            let data = {
                ids:id,
                cooperator_ids:me.state.ids
            }
            app.post('web/case_cooperation/batch_save',data,function(res){

            })
            app.navigateTo('/pages/doctorpages/medicalhomepage/medicalhomepage');
        }else{
            let data={
                id:id,
                cooperator_ids:me.state.ids
            }   
            app.post('web/case_cooperation/save',data,function(res){

            })
            app.navigateTo('/pages/doctorpages/editCase/editCase?id='+id);
        }   
    }
    

  render () {

    let doctor_list = this.state.doctor_contacts.map((item,index) => {
      return <View class='information' onClick={this.changeCheckBox.bind(this,index)}> 
                <View className='Checkbox'>
                    <Checkbox className='Checkbox-a' value='' checked={this.state.boolean[index]}></Checkbox>
                </View>
                <Image className='head' src={app.getPath(item.head_image)}/>
                <View className='box'>
                    <View className='name' style={this.state.textA}>{item.name}</View>
                    <View className='doctor' style={this.state.textB}>{item.positional_title}</View>
                </View>
                <View className='box-a'>
                    <View className='hospital' style={this.state.textB}>{item.hospital}</View>
                </View>
            </View>
        });

    return (
      <View className='team-invite'>

		<View className='box-b'>
			<AtSearchBar value={this.state.value} onChange={this.onChange.bind(this)} onActionClick={this.search.bind(this)} />
		</View>

		{doctor_list}

		<View className='btn'>
			<AtButton full={true} type='primary' size='normal' className='btn-son' onClick={this.go}>
				<AtIcon value='check-circle' size='30' color='white' className="btn-icon"></AtIcon>确定邀请成员
			</AtButton>
		</View>

      </View>
    )
  }
}
reactMixin.onClass(TeamInvite,myJs);
